<template>
  <div class="control-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="header-card">
          <div slot="header" class="headerClass">
            <span>风扇设备控制</span>
          </div>
          <div class="data">
            <span>室内温度：{{ temperatureNum }} ℃</span>
            <span>室内湿度：{{ humidityNum }} %</span>
            <span>二氧化碳浓度：{{ carbonDioxideNum }}ppm</span>
          </div>
          <div class="equipment">
            <span>风扇开关</span>
            <el-switch
              v-model="fanControl"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="开"
              inactive-text="关"
              @change="fanSwitch"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="header-card">
          <div slot="header" class="headerClass">
            <span>水泵设备控制</span>
          </div>
          <div class="data">
            <!-- <span>土壤温度：30 ℃</span> -->
            <span>土壤湿度：{{ soilMoistureNum }} %</span>
          </div>
          <div class="equipment">
            <span>水泵开关</span>
            <el-switch
              v-model="waterControl"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="开"
              inactive-text="关"
              @change="waterSwitch"
            />
          </div>
        </el-card>
      </el-col>
      <!-- 天气模块 -->
      <!-- <el-col :span="6">
        <el-card>
          <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tw&skin=grape" frameborder="0" height="500" allowtransparency="true" align="center" />
        </el-card>
      </el-col> -->
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card class="header-card">
          <div slot="header" class="headerClass">
            <span>灯设备控制</span>
          </div>
          <div class="data">
            <span>光照强度：{{ lightIntensityNum }} Lux</span>
          </div>
          <div class="equipment">
            <span>灯开关</span>
            <el-switch
              v-model="ledControl"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="开"
              inactive-text="关"
              @change="ledSwitch"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="header-card">
          <div slot="header" class="headerClass">
            <span>蜂鸣器控制</span>
          </div>
          <div class="data">
            <span>{{ wariness }}</span>
          </div>
          <div class="equipment">
            <span>蜂鸣器开关</span>
            <el-switch
              v-model="warnControl"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="开"
              inactive-text="关"
              @change="warnSwitch"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- <el-row :gutter="20" style="margin-top:20px;">
      <el-col :span="12">
        <el-card>
          <vue-core-video-player src="https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4" autoplay="false" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <vue-core-video-player src="rtmp://58.200.131.2:1935/livetv/hunantv" autoplay="false" />
        </el-card>
      </el-col>
    </el-row> -->
  </div>
</template>
<script>
import { controlEquip } from '@/api/monitor'
export default {
  data() {
    return {
      waterControl: false,
      fanControl: false,
      ledControl: false,
      warnControl: false,
      temperatureNum: '',
      humidityNum: '',
      soilMoistureNum: '',
      lightIntensityNum: '',
      carbonDioxideNum: '',
      fanStatus: 'normal',
      waterStatus: 'normal',
      wariness: '传感器数据正常,暂无报警信息！'
    }
  },
  computed: {
    dataList() {
      return this.$store.state.user.dataList1
    }
  },
  watch: {
    fanStatus(res) {
      console.log(res)
      if (res === 'temperature') {
        this.wariness = '温度过高，注意火灾！'
        this.$alert('温度过高，已开启排气扇排气，请及时查看处理！', '预警', {
          confirmButtonText: '确定',
          callback: action => {
          }
        })
      } else {
        this.wariness = '传感器数据正常,暂无报警信息！'
      }
    },
    waterStatus(res) {
      console.log(res)
      if (res === 'soil') {
        this.waterControl = true
        this.wariness = '土壤湿度过低，作物已缺水，请及时处理！'
        this.$alert('作物已缺水，已开启水泵补水，请及时查看处理', '预警', {
          confirmButtonText: '确定',
          callback: action => {
          }
        })
      } else {
        this.waterControl = false
        this.wariness = '传感器数据正常,暂无报警信息！'
      }
    }
  },
  mounted() {
    this.getDataList()
    this.init()
  },
  methods: {
    ledSwitch(res) {
      if (res) {
        this.controlEquip('ledSwitch', 'ledon')
        setTimeout(() => {
          this.$message({
            message: '灯已开启！',
            type: 'success',
            duration: 1000
          })
        }, 500)
      } else {
        this.controlEquip('ledSwitch', 'ledoff')
        setTimeout(() => {
          this.$message({
            message: '灯已关闭！',
            type: 'success',
            duration: 1000
          })
        }, 500)
      }
    },
    fanSwitch(res) {
      if (res === true) {
        this.controlEquip('fanSwitch', 'fanon')
        setTimeout(() => {
          this.$message({
            message: '风扇已开启！',
            type: 'success',
            duration: 1000
          })
        }, 500)
      } else {
        this.controlEquip('fanSwitch', 'fanoff')
        setTimeout(() => {
          this.$message({
            message: '风扇已关闭！',
            type: 'success',
            duration: 1000
          })
        }, 500)
      }
    },
    waterSwitch(res) {
      if (res) {
        this.controlEquip('waterSwitch', 'wateron')
        setTimeout(() => {
          this.$message({
            message: '水泵已开启！',
            type: 'success',
            duration: 1000
          })
        }, 500)
      } else {
        this.controlEquip('waterSwitch', 'wateroff')
        setTimeout(() => {
          this.$message({
            message: '水泵已关闭！',
            type: 'success',
            duration: 1000
          })
        }, 500)
      }
    },
    warnSwitch(res) {
      if (res) {
        this.controlEquip('buzzerSwitch', 'buzzeron')
        setTimeout(() => {
          this.$message({
            message: '蜂鸣器已开启！',
            type: 'success',
            duration: 1000
          })
        }, 500)
      } else {
        this.controlEquip('buzzerSwitch', 'buzzeroff')
        setTimeout(() => {
          this.$message({
            message: '蜂鸣器已关闭！',
            type: 'success',
            duration: 1000
          })
        }, 500)
      }
    },
    // 控制传感器设备
    async controlEquip(topic, msg) {
      await controlEquip({
        uid: 'a3e31f5b515e4dd49ea0d36a8c2ffbdc',
        topic: topic,
        msg: msg
      }).then((res) => {
        // console.log(res)
      })
    },
    init() {
      this.timer = setInterval(() => {
        this.$store.dispatch('user/getDataList1').then(() => {
          const list = this.dataList[0].msg
            .split('#')
            .filter((item) => item !== '')
          // if (list[5] === 'temperature') {
          //   this.wariness = '温度过高，注意火灾！'
          //   this.$alert('温度过高，已开启排气扇排气，请及时查看处理！', '预警', {
          //     confirmButtonText: '确定',
          //     callback: action => {
          //     }
          //   })
          // } else {
          //   this.wariness = '传感器数据正常,暂无报警信息！'
          // }
          // if (list[6] === 'soil') {
          //   this.wariness = '土壤湿度过低，作物已缺水，请及时处理！'
          //   this.$alert('作物已缺水，已开启水泵补水，请及时查看处理', '预警', {
          //     confirmButtonText: '确定',
          //     callback: action => {
          //     }
          //   })
          // } else {
          //   this.wariness = '传感器数据正常,暂无报警信息！'
          // }
          this.$nextTick(() => {
            this.temperatureNum = list[0]
            this.humidityNum = list[1]
            this.lightIntensityNum = list[2]
            this.soilMoistureNum = list[3]
            this.carbonDioxideNum = list[4]
            this.fanStatus = list[5]
            this.waterStatus = list[6]
          })
        })
      }, 5000)
    },
    async getDataList() {
      this.$store.dispatch('user/getDataList1').then(() => {
        const list = this.dataList[0].msg
          .split('#')
          .filter((item) => item !== '')
        // if (list[5] === 'temperature') {
        //   this.wariness = '温度过高，注意火灾！'
        //   this.$alert('温度过高，已开启排气扇排气，请及时查看处理！', '预警', {
        //     confirmButtonText: '确定',
        //     callback: action => {
        //     }
        //   })
        // } else {
        //   this.wariness = '传感器数据正常,暂无报警信息！'
        // }
        // if (list[6] === 'soil') {
        //   this.wariness = '土壤湿度过低，作物已缺水，请及时处理！'
        //   this.$alert('作物已缺水，已开启水泵补水，请及时查看处理', '预警', {
        //     confirmButtonText: '确定',
        //     callback: action => {
        //     }
        //   })
        // } else {
        //   this.wariness = '传感器数据正常,暂无报警信息！'
        // }
        this.$nextTick(() => {
          this.temperatureNum = list[0]
          this.humidityNum = list[1]
          this.lightIntensityNum = list[2]
          this.soilMoistureNum = list[3]
          this.carbonDioxideNum = list[4]
          this.fanStatus = list[5]
          this.waterStatus = list[6]
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.control-container {
    padding: 20px;
}
.headerClass {
    font-size: 18px;
    font-weight: 600;
}
.equipment {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}
.data {
    display: flex;
    justify-content: space-around;
    font-size: 14px;
    font-weight: 600;
    padding: 10px;
    margin-bottom: 30px;
    text-align: center;
    border: 2px solid #999;
    border-radius: 10px;
}
</style>
